<template>
  <div style="width: 100%; height: 100%">
    <MainHeader class="slogan-header"></MainHeader>

    <div class="mainIndex-bg">

      <div class="main-container-content">
        <!-- 学生身份 -->

        <div class="bannerIndex_containers">
         
              <div class="bannerIndex_containers_itemContainer">
                <div class="bannerIndex_containers_item" @click="goToPage(listItem)" v-for="(listItem, listIndex) in itemcontainers" :key="listIndex">
                  <div>
                    <img :src="require('@/assets/index/' + listItem.iconImg)" alt=""
                      class="bannerIndex_containers_item_img" />
                    <div class="bannerIndex_containers_item_text">{{ listItem.text }}</div>
                  </div>

                </div>
              </div>
                <!-- :style="{ backgroundImage: 'url(' + require('../../assets/index/' + listItem.bg) + ')' }" -->
                
           
          </div>


        <!-- 教师端 -->

     




      </div>

      <MainFooter :showFixed="true" backgroundColor="rgba(58, 98, 215, 0)" />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import VueSeamlessScroll from 'vue-seamless-scroll'
import moment from 'moment/moment'
export default {
  name: 'Index',
  components: {
    VueSeamlessScroll
  },
  data() {
    return {
      itemcontainers: [
        // {
        //   text: '拍照检测',
        //   bg: 'img_01_bg.png',
        //   iconImg: 'img_01.png'
        // },
        // {
        //   text: '用户管理',
        //   bg: 'img_03_bg.png',
        //   iconImg: 'img_03.png'
        // },
        // {
        //   text: '教学库管理',
        //   bg: 'img_02_bg.png',
        //   iconImg: 'img_02.png'
        // },
       

        //  {
        //   text: '霏图小程序',
        //   bg: 'img_04_bg.png',
        //   iconImg: 'img_04.png'
        // }
      ],
      itemcontainers: [
        {
          text: '教材学习',
          bg: '',
          iconImg: 'e-01.png'
        },
        // {
        //   text: '学习班教学',
        //   bg: 'img_04_bg.png',
        //   iconImg: 'img_04.png'
        // },
        {
          text: '真实病例学习',
          bg: '',
          iconImg: 'e-02.png'
        },
        {
          text: '全真模拟',
          bg: '',
          iconImg: 'e-03.png'
        },
        {
          text: '正式考试',
          bg: '',
          iconImg: 'e-04.png'
        },
        {
          text: '我的错题集',
          bg: '',
          iconImg: 'e-06.png'
        },
        {
          text: '我的笔记',
          bg: '',
          iconImg: 'e-07.png'
        },
        {
          text: '我的收藏',
          bg: '',
          iconImg: 'e-08.png'
        },
        {
          text: '管理入口',
          bg: '',
          iconImg: 'e-05.png'
        },
       
      ]
    }
  },
  computed: {
    ...mapState({
      indexManageInfo: state => state.indexManageInfo
    })
  },
  watch: {
    indexManageInfo: {
      handler(obj) {
        if (obj.frontImagesAdvertisement) this.initScroll()
      },
      deep: true
    }
  },
  mounted() {

  },
  methods: {
    goToPage(e) {
      const { state } = this.$store;
      const { user } = state;
      console.log(user)
      if (user.id) {
        if (e.text == '管理入口') {
          this.$router.push({ path: "/teachManageList", query: {} });
        } else if (e.text == '真实病例学习') { //pathLearn
          this.$router.push({ path: "/pathLearn", query: {} });
        } else if (e.text == '用户管理') { //pathLearn
          this.$router.push({ path: "/user", query: {} });
        } else if (e.text == '自我考试') { //pathLearn
          this.$router.push({ path: "/selfTest", query: {} });
        } else if (e.text == '教材学习') { //studentLearn
          this.$router.push({ path: "/studentLearn", query: {} });
        } else if (e.text == '全真模拟') { //simulationExamList
          this.$router.push({ path: "/simulationExamList", query: {} });
        }else if (e.text == '我的笔记') { //myNote
          this.$router.push({ path: "/myNote", query: {} });
        }else if (e.text == '我的错题集') { //mistakesCollection
          this.$router.push({ path: "/mistakesCollection", query: {} });
        }else if (e.text == '我的收藏') { //myCollection
          this.$router.push({ path: "/myCollection", query: {} });
        }
      } else {
        this.$router.push('/login');
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.mainIndex-bg {
  width: 100%;
  height: calc(100% - 70px);
  background-image: url('../../assets/images/bj.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.bannerIndex_containers_itemContainer{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  width:100%;
}
</style>
